<script setup>
import {ref} from 'vue'
const str=ref("你好")
const fsize=ref(18)
const vInputFocus={
    mounted:el=>{
        el.focus()
        el.style.backgroundColor="red"
    },
    updated:(el,binding)=>{
        el.style.fontSize=binding.value+'px'
    }

}
</script>
<template>
<h1>自定义指令</h1>
<pre>
    1.v-model
    2.v-if v-show
    3.v-for
    4.v-text
    5.v-html
    6.v-bind
    7.v-on
    自定义指令：私有自定义和全局定义指令
    作用：方便开发者通过直接操作Dom元素来实现一些逻辑处理业务
    生命周期函数：自定义指令最常用的生命周期函数是mounted\updated
    用法：
    1定义自定义指令名称
    四个对象传递
    （1）el :绑定的dom元素
    （2） binding:参数值（可以传一个或者多个，如果是多个参数时，通过对象传递）
    （3）vnode:
    （4） prevnode
    (3)(4) 都是虚拟节点，他们不是真正dom元素
</pre>
<input type="text" v-model="str" v-inputFocus="fsize" />
{{fsize}}
<button @click="fsize++">++</button>
<button @click="fsize--">--</button>
</template>
<style scoped>
</style>